<template>
  <div>
    <template v-if="showSearchInput">
      <div>
        <el-input v-model="deptName" placeholder="请输入组织名称" clearable
                  size="small" prefix-icon="el-icon-search" @keyup.enter.native="handleSelectOrgCode"
        />
      </div>
    </template>
    <el-tree :data="deptOptions"
             :filter-node-method="filterNode"
             :expand-on-click-node="false"
             ref="tree"
             default-expand-all
             @node-click="handleNodeClick"
             style="margin-top: 20px"
    >
<!--      <template slot-scope="{node,data}">-->
      <!--        {{ node.label }}-->
      <!--      </template>-->
    </el-tree>
  </div>
</template>

<script>
import { deptTreeSelect } from '@/api/system/dept'

export default {
  name: 'customDeptTree',
  props: {
    showSearchInput: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      // 部门树选项
      deptOptions: undefined,
      deptName: undefined
    }
  },
  created() {
    this.getTreeselect()
  },
  methods: {
    /** 查询部门下拉树结构 */
    getTreeselect() {
      deptTreeSelect().then(response => {
        this.deptOptions = response.data
      })
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.$emit('clickDeptNode', data)
    },
    // 搜索树节点
    handleSelectOrgCode() {
      this.$refs.tree.filter(this.deptName)
      this.handleQuery()
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    }
  }
}
</script>


<style lang="scss" scoped>

</style>
